<template>
<ToDoHeader @addTodo="addTodo"/>  
 <!-- //监听子组件的addTodo事件 -->
<ToDoMain :list="showlist" @delTodo="delTodo"/> 
<!-- //监听子组件的delTodo事件 -->
<ToDoFooter :lastlen="lastlen" :status="status" @updateStatus="updateStatus"/>
 <!-- //传递数据给子组件 -->
</template>
<script setup>
// import the components
import ToDoHeader from './components/ToDoHeader.vue'
import ToDoMain from './components/ToDoMain.vue'
import ToDoFooter from './components/ToDoFooter.vue'

import { ref,computed } from 'vue'
const list=ref([
  {id:1,name:'working out',done:false},
  {id:2,name:'reading',done:true},
]) //自定义属性数据传递给子组件
  const addTodo=(name)=>{
    list.value.push({name,done:false,id:~~(Math.random()*1000)})  // 添加数据 传递给子组件 
  }

  const delTodo=(id)=>{
    list.value=list.value.filter(item=>item.id!==id) //删除数据 传递给子组件
  }

  const lastlen=computed(()=>list.value.filter(item=>!item.done).length) //计算属性

  const status=ref('all') //状态
  const showlist=computed(()=>{  //过滤数据
    if(status.value ==='all'){
      return list.value
    }else if(status.value==='active'){
      return list.value.filter(item=>!item.done)
    }else{
      return list.value.filter(item=>item.done)
    }
  })
  const updateStatus=(status_1)=>{ //更新状态
    status.value = status_1
  }
</script>